<template>
  <div class="app">
    <h2 class="title">Vue路由测试</h2>
    <!-- 导航区 -->
    <div class="navigate">
      <!-- <RouterLink to="/home" active-class="active">首页</RouterLink>
        <RouterLink to="/news" active-class="active">新闻</RouterLink>
      <RouterLink to="/about" active-class="active">关于</RouterLink>-->
      <RouterLink
        v-for="item in routerList"
        :key="item.columnId"
        :to="item.path"
        :class="columnId==item.columnId?'active':''"
        @click="handleGoInfo(item)"
      >{{ item.name }}</RouterLink>
    </div>
    <!-- 展示区 -->
    <div class="main-content">
      <RouterView></RouterView>
    </div>
  </div>
</template>
  <script setup lang='ts'>
import { RouterView, RouterLink, useRouter } from "vue-router";
import { ref } from "vue";
const router = useRouter();
let columnId = ref(1);
type routerType = {
  columnId: number;
  name: string;
  path: string;
};
let routerList = ref<routerType[]>([
  {
    columnId: 1,
    name: "首页",
    path: "/home"
  },
  {
    columnId: 2,
    name: "新闻",
    path: "/news"
  },
  {
    columnId: 3,
    name: "关于",
    path: "/about"
  }
]);
function handleGoInfo(item: any) {
  // this.$router.push(item.path)
  router.push(item.path);
  columnId.value = item.columnId;
}
</script>
  <style scoped>
.title {
  text-align: center;
  word-spacing: 5px;
  margin: 30px 0px;
  height: 70px;
  line-height: 70px;
  background-image: linear-gradient(45deg, gray, white);
}
.navigate {
  text-align: center;
}
.navigate a {
  margin: 0px 50px;
  font-size: 20px;
  text-decoration: none;
  display: inline-block;
  width: 100px;
  line-height: 50px;
  border-radius: 10px;
  background-color: rgb(128, 128, 128);
  color: #fff;
  /* border: 1px solid red; */
}
.main-content {
  width: 800px;
  height: 250px;
  border: 1px solid gray;
  margin-top: 50px;
  border-radius: 10px;
  padding: 10px;
  margin-left: 50%;
  transform: translateX(-50%);
}
.active {
  background-color: rgb(116, 145, 127) !important;
  color: orange !important;
}
</style>